<template>
  <div class="app-mytask-list">
    <v-list>
      <v-list-group
        value="true"
        sub-group
        color="info"
        v-for="obj in list"
        :key="obj.project"
      >
        <template v-slot:activator>
          <v-list-item-content>
            <v-list-item-title>
              <div class="projectname">
                <span>{{ obj.projectname }}</span>
                <v-chip
                  small
                  class="ma-2 blue-grey lighten-3 text-center white--text"
                  >{{ obj.list.length }}</v-chip
                >
              </div>
            </v-list-item-title>
          </v-list-item-content>
        </template><v-list-item v-for="item in obj.list" :key="item.id">
          <v-checkbox></v-checkbox>
          <v-list-item-title>
            <span @click="handleClick(item)" class="taskname">{{ item.name }}</span>
          </v-list-item-title>
        </v-list-item>
        <v-divider></v-divider>
      </v-list-group>
    </v-list>
  </div>
</template>

<script lang="ts">
import {
  Vue,
  Component,
  Prop,
  Model,
  Emit,
  Watch,
  Provide,
} from "vue-property-decorator";

import { Subject, Subscription } from "rxjs";
import "./app-mytask-list.less";

@Component({})
export default class AppMyTaskList extends Vue {

  /**
   * 父列表数据
   *
   * @memberof MyTaskList
   */
  @Prop() public items!: Array<any>;

  /**
   * 组件列表数据
   * 
   * @memberof AppMyTaskList
   */
  public list: Array<any> = [];

  public mounted(){
    if(this.items && this.items.length > 0)
      this.list = this.conversionList(this.items);
  }

  /**
   * 转换成所需要的数据格式
   * 
   * @param {any} items 列表数据
   * @return {Array<any>} 转换后数据
   * @memberof AppMyTaskList
   */
  public conversionList(items: any): Array<any>{
    let list: Array<any> = [];
    items.forEach((item: any) => {
      isExist(item);
    });
    function isExist(item: any){
      for(let i=0; i<list.length; i++){
        if(Object.is(list[i].project,item.project)){
          list[i].list.push(item);
          return;
        }
      }
      let obj: any = {};
      let cldlist: Array<any> = [];
      obj.project = item.project;
      obj.projectname = item.projectname;
      cldlist.push(item);
      obj.list = cldlist;
      list.push(obj);
    }
    return list;
  }

  /**
   * 跳转到任务详情页面
   *
   * @event click
   * @param {any}
   * @memberof AppMyTaskList
   */
  public handleClick(item: any) {
    this.$emit('click', item)
  }

}
</script>
